{extend name="common/base"/}
{block name="style"}
{/block}
{block name="body"}
{php}$site_title = $category['name'];{/php}
{include file="common/header"/}
<style>
  .hottop .desc {
    height: 1.2rem;
    line-height: .4rem;
    color: #666;
    overflow: hidden;
  }
</style>
<div class="hottop bui-scroll" id="uiList">
    <div class="bui-scroll-main">
      <ul class="bui-list bui-list-thumbnail">
  
      </ul>
    </div>
</div>

{/block}
{block name="script"}
<script>
  bui.ready(function () {
    $(".footer").hide();
    var uiList = bui.list({
        id: "#uiList",
        url: "{:furl('v1/booklist', [], true, 'api')}",
        headers: { Token: token },
        pageSize: 10,
        data: { order: 'hits DESC', genre: "{$id}" },
        field: {
            page: "page",
            size: "limit",
            data: "data.data"
        },
        template: function (data) {
            if(data.length <= 0) return `<div class="span1 bui-align-center"><p class="item-text">暂无数据</p></div>`;
            var html = "";
            data.forEach(function(el, index) {
                html +=`<li class="bui-btn bui-box">                        
                            <div class="bui-thumbnail"><a href="${el.url}"><img src="${el.cover}"></a></div>
                            <div class="span1">
                            <a href="${el.url}">
                                <h3 class="item-title">${el.title}</h3>
                                <p class="item-text desc">${el.remark}</p>
                                <p class="item-text author">${el.author}</p>
                            </a>
                            </div>                        
                        </li>`
            });
            return html;
        },
        onLoaded: function onLoaded(r) {
            if(parseInt(r.code) > 400) {
                gettoken();
            }
        },
    });
  })
</script>
{/block}